<template>
   <div>

  <sky-panel title="输入校验">
    <template v-slot:header>
      <span>自定义输入校验方法传入</span>
    </template>
    <template v-slot:main>

      <div>
        <el-input v-verify="check" v-model.trim="form.number" placeholder="请输入数字"></el-input>

      </div>
    

    </template>
  </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

         &lt;el-input 
            v-verify="check"
            v-model.trim="form.number"
            placeholder="请输入数字"
        &gt;&lt;/el-input&gt;
          
        </code>
        <code class="javascript">

          data() {
            return {
              form:{
                number:"",
              },
            };
          },

          methods:{
            check(val){
              console.log("当前输入的值",val)
              return "校验后返回正确值"
            }
          }
              
        </code>
    </pre>
    </div>
  </sky-code-panel>

   </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
      data() {
        return {
          form:{
            number:"",
          },
        };
      },

      methods:{
        check(val){
          console.log("当前输入的值",val)
          return "校验后返回正确值"
        }
      }
  });
</script>


<style lang="scss" scoped>

</style>